<template>
    <div class="app-container" >
      <h2>课程学术策划与教学团队</h2>
        <speaker  @on-delete-teacher="deleteTeacher2" :key="index" v-for="(teacher,index) in teachers" :teacher="teacher" :tIndex="index"></speaker>
      <div style="margin-top:10px;">
        <el-button type="primary" round @click="showSpeakerTeacherInfo">添加教师信息</el-button>
      </div>
    </div>
</template>

<script>
    import Speaker from '@/components/Speaker'
    import {getTeachers} from '@/api/course'
    export default {
      components:{Speaker},
      data(){
        return {
          courseId:0,
          mainTeacherName:'',
          imageUrl: '',
          textarea:"",
          teachers:[],
          dialogVisible:false,
          teacherInfo:{
            id:0,
            courseId:0,
            name:'',
            type:0,
            technicalTitle:'',
            schoolName:'',
            intro:'',
            birthday:"",
            technicalDirection:'',
            description:'',
            teacherId:0,
            teacherName:'',
          }
        }

      },
      mounted:function(){
        if(this.$route.query.courseId!=undefined){
          this.load();
          this.getTeachersInfo(this.$route.query.courseId);
          this.courseId = this.$route.query.courseId;
        }
      },
      methods:{
        load(open){
          let loadingInstance = this.$loading({
            fullscreen: true,
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'});
          if(open){
            loadingInstance.close();
          }
        },
        getTeachersInfo:function(id){
          getTeachers({"courseId":id}).then(response => {
            for (let i = 0; i < response.rows.length; i++) {
              let a = Object.assign({},response.rows[i])
              this.teachers.push(a)
            }
            this.load(true);
          });
        },
        deleteTeacher2:function(teacher){
          this.teachers.splice(teacher,1);
        },
        showSpeakerTeacherInfo:function(){
          let t = Object.assign({}, this.teacherInfo);
          t.courseId = this.courseId;
          this.teachers.push(t);
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
      }
    }
</script>

<style scoped>
  table{
    width: 90%;
    margin-top:10px;
  }
  table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #CCCCCC;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #ffffff;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
